<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>模板语法</title>
	<script src="./js/vue.js"></script>
</head>
<body>
	<div id="root">
		<h1>插值语法</h1>
		<p>Hello, My name is {{name}}</p>

		<h1>指令语法</h1>
		<p>我的Vue学校是: {{school.name}}</p>
		<p>地址是: <a v-bind:href="school.url">百度一下</a></p>
		<!-- 简写 v-bind ---> : -->
		<p>地址是: <a :href="school.url">百度一下</a></p>

		<br>
		<!-- v-html 用于输出html代码 -->
		<div v-html="message"></div>

		<!-- v-if 将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素 -->
		<p v-if="seen">现在你看到我了</p>
	</div>
</body>
<script>
	Vue.config.productionTip = false
	new Vue({
		el: "#root",
		data: {
			name: "Mark",
			school: {
				name: "尚硅谷",
				url: "https://www.baidu.com"
			},
			message: "<h1>菜鸟教程</h1>",
			seen: true
		}
	})
	
</script>

</html>